/**
 * 功能描述: 选项穿梭框样式表
 * @author 崔孝楠
 * @date 2022/9/30 9:15
 * @version 1.0
 */
@import '../../style/index';

// 单个穿梭框布局
@mixin transfer-list--layout {
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 200px;
}

// 穿梭框头部布局
@mixin transfer-list-header--layout {
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
  padding: 8px 12px 9px;
  // 头部子节点间隔
  > :not(:last-child) {
    margin-right: 4px;
  }
}

// 下拉布局
@mixin transfer-list-header-dropdown--layout {
  transform: translateY(10%);
}

// 选项外层容器布局
@mixin transfer-list-content--layout {
  display: flex;
  flex: auto;
  flex-direction: column;
  overflow: auto;
  font-size: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

// 选项布局
@mixin transfer-list-content-item--layout {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  line-height: 20px;
  // 子元素间隔
  > :not(:last-child) {
    margin-right: 8px;
  }
}

// 穿梭组件整体布局
@include b(transfer) {
  display: flex;
  // 内部图标布局
  svg {
    transform: translateY(10%);
    width: 1em;
    height: 1em;
  }
}

// 单个穿梭框样式
@include b(transfer-list) {
  border: $border-base;
  border-radius: 2px;
  @include transfer-list--layout;
}

// 穿梭框头部样式
@include b(transfer-list-header) {
  font-size: $font-size-medium;
  color: $color-text-primary;
  background: $color-white;
  border-bottom: 1px solid $border-color-light;
  border-radius: 2px 2px 0 0;
  @include transfer-list-header--layout;
}

// 头部下拉样式
@include b(transfer-list-header-dropdown) {
  font-size: 10px;
  cursor: pointer;
  @include transfer-list-header-dropdown--layout;
}

// title文本布局
@include b(transfer-list-header-title) {
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  text-overflow: ellipsis;
}

// 选项外层容器样式
@include b(transfer-list-content) {
  font-size: $font-size-medium;
  @include transfer-list-content--layout;
}

// 选项样式
@include b(transfer-list-content-item) {
  transition: all .3s;
  @include transfer-list-content-item--layout;
}

// 选项文本布局
@include b(transfer-list-content-item-text) {
  flex: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 操作按钮布局
@include b(transfer-operation) {
  display: flex;
  flex: none;
  flex-direction: column;
  align-self: center;
  margin: 0 8px;
  // 按钮内图标与文本间隔
  svg + span {
    margin-left: 8px;
  }
  // 按钮之间的间隔
  .#{$namespace}-btn:first-child {
    margin-bottom: 4px;
  }
}

// 搜索框布局
@include b(transfer-list-search-wrapper) {
  position: relative;
  flex: none;
  padding: 12px;
  // 搜索框前缀颜色
  @include b(input-affix-wrapper) {
    color: $color-text-placeholder;
  }
}
